<template>

  <div>


<!--    <div :key="index" v-for="(item, index) in groupList" class="groupList">-->
<!--      <span>{{ item.groupName }}</span>-->
<!--      <line-chart :chart-data="item.data" />-->
<!--&lt;!&ndash;      <div style="height: 400px;margin: 10px;box-shadow: 0 0 8px" :id="'chartDom' + index"></div>&ndash;&gt;-->
<!--    </div>-->

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12" :key="index" v-for="(item, index) in groupList" class="groupList">
        <span>{{ item.groupName }}</span>
        <div class="chart-wrapper">
          <my-line-chart :chart-data="item.data" />
        </div>
      </el-col>
    </el-row>


  </div>

</template>

<script>
import log from "../../monitor/job/log";
import MyLineChart from "../../dashboard/MyLineChart";


export default {
  name: "index",

  components: {

    MyLineChart

  },

  data() {
    return {
      groupList: [{
        groupName: '相电压',
        data: {
          expectedData: [100, 120, 161, 134, 105, 160, 165],
          actualData: [120, 82, 91, 154, 162, 140, 145]
        }
      }, {
        groupName: '相电流',
        data: {
          expectedData: [200, 192, 120, 144, 160, 130, 140],
          actualData: [180, 160, 151, 106, 145, 150, 130]
        },
      }]
    }
  },

  created() {

    // this.groupList.forEach((item, index) => {
    //   console.log(index);
    //   this.$nextTick(() => {
    //     this.init(index)
    //   })
    // })

  },

  methods: {

    init(index) {

      // 找到有几个分组
      var myChart = this.$echarts.init(document.getElementById('chartDom' + index))

      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };

      myChart.setOption(option, true)

      // // 使用for循环循环多少个容器
      // for (let i = 0; i < roseCharts.length; i++) {
      //
      //   console.log("i：" + i)
      //
      //     //自执行函数，不添加每次都会给最后一个图表赋值，具体问题看下方问题。
      //     (function (i) {
      //       //动态创建折线图（使用索引）
      //       // let myChart = echarts.init(roseCharts[i]);
      //
      //       let option = {
      //         xAxis: {
      //           type: 'category',
      //           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //         },
      //         yAxis: {
      //           type: 'value'
      //         },
      //         series: [
      //           {
      //             data: [820, 932, 901, 934, 1290, 1330, 1320],
      //             type: 'line',
      //             smooth: true
      //           }
      //         ]
      //       };
      //
      //       myChart.setOption(option, true)
      //
      //     })(i)
      // }

    }

  }
}
</script>

<style scoped>

</style>
